<template>
  <div class="table">
    <!-- 面包屑(breadcrumb) -->
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path:'/'}">系统首页</el-breadcrumb-item>
        <el-breadcrumb-item>基础表格</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 内容器(container) -->
    <div class="container">
      <!-- 操作栏(handle-box) -->
      <div class="handle-box">
        <el-button @click="tableAdd" type="success">新 增</el-button>
        <el-button :disabled="!table.selection.length" @click="tableSelectionDeleteHandle" type="primary" class="mr10">
          选择删除
        </el-button>
        <el-select v-model="search.selected" placeholder="选择省" clearable class="handle-select mr10">
          <el-option label="广东省" value="广东省" key="1"></el-option>
          <el-option label="湖南省" value="湖南省" key="2"></el-option>
        </el-select>
        <el-input v-model="search.key" placeholder="关键字" clearable class="handle-input mr10"></el-input>
        <el-button type="primary">搜索</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="computedTableData" @selection-change="tableSelectionChangeHandle" border class="table">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <el-table-column label="日期" prop="date"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="tableDetails(scope.$index,scope.row)">详情</el-button>
            <el-button type="text" icon="el-icon-edit" @click="tableEdit(scope.$index,scope.row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="tableDelete(scope.$index, scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页栏 -->
      <div class="pagination">
        <el-pagination background layout="prev,pager,next" :total="100"></el-pagination>
      </div>
    </div>

    <!-- 弹出层(dialog) -->
    <el-dialog title="新增" :visible.sync="table.add.createDictionaryCategoryDialogVisible" width="30%">
      <el-form ref="form" :model="table.add.data" label-width="50px">
        <el-form-item label="日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="table.add.data.date"
                          value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="table.add.data.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="table.add.data.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tableAddCancel">取 消</el-button>
        <el-button type="primary" @click="tableAddSave">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="table.edit.createDictionaryCategoryDialogVisible" width="30%">
      <el-form ref="form" :model="table.edit.data" label-width="50px">
        <el-form-item label="日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="table.edit.data.date"
                          value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="table.edit.data.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="table.edit.data.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tableEditCancel">取 消</el-button>
        <el-button type="primary" @click="tableEditSave">保 存</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 搜索
        search: {
          selected: '',
          key: ''
        },
        // 表格
        table: {
          data: [],
          selection: [],
          add: {
            data: {
              date: '',
              name: '',
              address: ''
            },
            createDictionaryCategoryDialogVisible: false
          },
          edit: {
            index: -1,
            data: {
              date: '',
              name: '',
              address: ''
            },
            createDictionaryCategoryDialogVisible: false
          }
        },
        //分页
        pagination: {}
      }
    },
    methods: {
      fetchTableData() {
        this.$axios.post('/mock/users', {}).then(res => {
          this.table.data = res.data.data;
        })
      },
      tableSelectionChangeHandle(selection) {
        this.table.selection = selection;
      },
      tableSelectionDeleteHandle() {
        this.$confirm('确定删除选中的记录？', '提示', {type: 'warning'}).then(() => {
          this.table.data = this.table.data.filter(item => !this._.includes(this.table.selection, item));
        })
      },
      tableEdit(index, row) {
        this.table.edit.index = index;
        this.table.edit.data = Object.assign({}, row);
        this.table.edit.createDictionaryCategoryDialogVisible = true;
      },
      tableEditCancel() {
        this.table.edit.index = -1;
        Object.keys(this.table.edit.data).forEach(prop => this.table.edit.data[prop] = '');
        this.table.edit.createDictionaryCategoryDialogVisible = false;
      },
      tableEditSave() {
        this.$set(this.table.data, this.table.edit.index, Object.assign({}, this.table.edit.data));
        this.tableEditCancel();
      },
      tableAdd() {
        this.table.add.createDictionaryCategoryDialogVisible = true;
      },
      tableAddCancel() {
        Object.keys(this.table.add.data).forEach(prop => this.table.add.data[prop] = '');
        this.table.add.createDictionaryCategoryDialogVisible = false;
      },
      tableAddSave() {
        this.table.data.splice(0, 0, Object.assign({}, this.table.add.data));
        this.tableAddCancel();
      },
      tableDelete(index) {
        this.$confirm('确定删除？', '提示', {type: 'warning'}).then(() => {
          this.table.data.splice(index, 1);
        })
      },
      tableDetails() {
        let routeData = this.$router.resolve({path: '/notice', query: {data: "someData"}});
        window.open(routeData.href, '_blank');
      }
    },
    computed: {
      computedTableData() {
        return this.table.data.filter(item => {
          let selected = this.search.selected;
          if (selected && !item.address.includes(selected)) {
            return false;
          }
          let key = this.search.key;
          if (key) {
            return Object.keys(item).some(prop => item[prop].includes(key));
          }
          return true;
        })
      }
    },
    created() {
      this.fetchTableData();
    }
  }
</script>

<style scoped>
  .handle-box {
    margin-bottom: 10px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .del-dialog-cnt {
    font-size: 16px;
    text-align: center
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }
</style>
